<template>
  <div>
    <van-row>
      <van-nav-bar
          title="积分小商城"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
      />
      <van-col span="24">
        <van-tabs @click="onClick">
          <van-tab v-for="index in categories.length" :title="categories[index-1].name">

            <van-card v-for="(item,indexU) in phones"
                :price="item.price"
                :desc="item.desc"
                :title="item.title"
                :thumb="images[index-1].url[indexU]"
            >
              <template #tags>
                <van-tag v-for="tag in item.tag" color="#f2826a" style="margin-left:5px">{{tag.name}}</van-tag>
              </template>
              <template #footer>
                <van-button round type="info" size="mini" @click="buy(index-1,indexU)">购买</van-button>
              </template>
            </van-card>
          </van-tab>
        </van-tabs>
      </van-col>
      <van-sku
          v-model="show"
          :sku="sku"
          :goods="goods"
          :hide-stock="sku.hide_stock"
          @buy-clicked="onBuyClicked"
      >
        <!-- 自定义 sku actions -->
        <template #sku-actions="props">
          <div class="van-sku-actions">
            <van-button square size="large" type="warning" @click="props.skuEventBus.$emit('sku:buy'),flag=2">
              支付宝
            </van-button>
            <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
            <van-button
                square
                size="large"
                type="danger"
                @click="props.skuEventBus.$emit('sku:buy')"
            >
              积分兑换(￥1=100积分)
            </van-button>
          </div>
        </template>
      </van-sku>

    </van-row>



  </div>
</template>

<script>
import { Toast } from 'vant';
import {mapState} from "vuex";
export default {
  name: "iphone_store",
  data() {
    return {
      /*导航数组*/
      categories: [
        {name: '牙刷',
          type: 1},
        {name: '数码',
          type: 2},
        {name: '零食',
          type: 3},
        {name: '毛巾',
          type: 4}
      ],
      /*卡片数组*/
      phones: [
        {
          id: 1,
          price: '9.00',
          desc: '电动牙刷',
          title: 'honor 8A',
          tag: [
            {
              name: '100ma'
            },
            {
              name: '1200ma'
            }
          ]
        },
        {
          id: 2,
          price: '18.00',
          desc: '手动牙刷',
          title: 'honor 8A',
          tag: [
            {
              name: '10cm'
            },
            {
              name: '12cm'
            }
          ]
        },
        {
          id: 3,
          price: '1200',
          desc: '纳米牙刷',
          title: 'honor 8A',
          tag: [
            {
              name: '10cm'
            },
            {
              name: '12cm'
            }
          ]
        },
        {
          id: 4,
          price: '1200',
          desc: '质感牙刷',
          title: 'honor 8A',
          tag: [
            {
              name: '10cm'
            },
            {
              name: '12cm'
            }
          ]
        },
        {
          id: 5,
          price: '1200',
          desc: '炭纤维牙刷',
          title: 'honor 8A',
          tag: [
            {
              name: '10cm'
            },
            {
              name: '12cm'
            }
          ]
        },
        {
          id: 6,
          price: '1200',
          desc: '默迪牙刷',
          title: 'honor 8A',
          tag: [
            {
              name: '10cm'
            },
            {
              name: '12cm'
            }
          ]
        },
        {
          id: 7,
          price: '1200',
          desc: '美白牙刷',
          title: 'honor 8A',
          tag: [
            {
              name: '10cm'
            },
            {
              name: '12cm'
            }
          ]
        },
        {
          id: 8,
          price: '1200',
          desc: '高质牙刷',
          title: 'honor 8A',
          tag: [
            {
              name: '10cm'
            },
            {
              name: '12cm'
            }
          ]
        },
        {
          id: 9,
          price: '1200',
          desc: '黑人牙刷',
          title: 'honor 8A',
          tag: [
            {
              name: '10cm'
            },
            {
              name: '12cm'
            }
          ]
        },
      ],
      /*购买弹窗*/
      show: false,
      sku: '',
      goods: '',
      /*图片数组*/
      images: [
        {id: 0,url: [
          "https://s1.328888.xyz/2022/09/16/cR4mo.png",
          "https://s1.328888.xyz/2022/09/16/cR61F.png",
          "https://s1.328888.xyz/2022/09/16/cRTtS.png",
          "https://s1.328888.xyz/2022/09/16/cRhd5.png",
          "https://s1.328888.xyz/2022/09/16/cRBbN.png",
          "https://s1.328888.xyz/2022/09/25/V8FUo.jpg",
          "https://s1.328888.xyz/2022/09/25/V8DGp.jpg",
          "https://s1.328888.xyz/2022/09/25/V8OZF.jpg",
          "https://s1.328888.xyz/2022/09/25/V8uTS.jpg",
          "https://s1.328888.xyz/2022/09/25/V8CZP.jpg",
          "https://s1.328888.xyz/2022/09/25/V8GUR.jpg",
          "https://s1.328888.xyz/2022/09/25/V8kh6.jpg",
          "https://s1.328888.xyz/2022/09/25/V81sX.jpg",
          "https://s1.328888.xyz/2022/09/25/V8cKr.jpg",
          "https://s1.328888.xyz/2022/09/25/V8Kjj.jpg",
          "https://s1.328888.xyz/2022/09/25/V8oQK.jpg",
          "https://s1.328888.xyz/2022/09/25/V8INm.jpg",
          "https://s1.328888.xyz/2022/09/25/V8MiE.jpg",
          "https://s1.328888.xyz/2022/09/25/V8sxk.jpg",
          "https://s1.328888.xyz/2022/09/25/V8fhJ.jpg",
          "https://s1.328888.xyz/2022/09/25/V8gMw.jpg",
        ]},
        {id: 1,url: [
          "https://s1.328888.xyz/2022/09/16/cRKy6.png",
          "https://s1.328888.xyz/2022/09/16/cRcdX.png",
          "https://s1.328888.xyz/2022/09/16/cR2bI.png",
          "https://s1.328888.xyz/2022/09/16/cRIgj.png",
          "https://s1.328888.xyz/2022/09/16/cRVnr.png",
          "https://s1.328888.xyz/2022/09/16/cRM4K.png",
          "https://s1.328888.xyz/2022/09/25/VxTvU.jpg",
          "https://s1.328888.xyz/2022/09/25/Vx6yd.jpg",
          "https://s1.328888.xyz/2022/09/25/Vx3wB.jpg",
          "https://s1.328888.xyz/2022/09/25/VxBgR.jpg",
          "https://s1.328888.xyz/2022/09/25/VxG66.jpg",
          "https://s1.328888.xyz/2022/09/25/VxbAP.jpg",
          "https://s1.328888.xyz/2022/09/25/VxCIX.jpg",
          "https://s1.328888.xyz/2022/09/25/VxG66.jpg",
          "https://s1.328888.xyz/2022/09/25/VxbAP.jpg",
          "https://s1.328888.xyz/2022/09/25/VxCIX.jpg",
          "https://s1.328888.xyz/2022/09/25/VxaHI.jpg",
          "https://s1.328888.xyz/2022/09/25/Vx1Fj.jpg",
          "https://s1.328888.xyz/2022/09/25/Vx55r.jpg",
          "https://s1.328888.xyz/2022/09/25/Vx9zK.jpg",
          "https://s1.328888.xyz/2022/09/25/VxcEm.jpg",
        ]},
        {id: 2,url: [
          "https://s1.328888.xyz/2022/09/16/cRwnC.png",
          "https://s1.328888.xyz/2022/09/16/cRbfy.png",
          "https://s1.328888.xyz/2022/09/16/cRC0d.png",
          "https://s1.328888.xyz/2022/09/16/cRa2U.png",
          "https://s1.328888.xyz/2022/09/16/cRkrB.png",
          "https://s1.328888.xyz/2022/09/25/VUftU.jpg",
          "https://s1.328888.xyz/2022/09/25/VUPkd.jpg",
          "https://s1.328888.xyz/2022/09/25/VUgdB.jpg",
          "https://s1.328888.xyz/2022/09/25/VUUBR.jpg",
          "https://s1.328888.xyz/2022/09/25/VUxfP.jpg",
          "https://s1.328888.xyz/2022/09/25/VUJn6.jpg",
          "https://s1.328888.xyz/2022/09/25/VUy0X.jpg",
          "https://s1.328888.xyz/2022/09/25/VUz2I.jpg",
          "https://s1.328888.xyz/2022/09/25/VUSmr.jpg",
          "https://s1.328888.xyz/2022/09/25/VU7rj.jpg",
          "https://s1.328888.xyz/2022/09/25/VUe1K.jpg",
          "https://s1.328888.xyz/2022/09/25/VUrym.jpg",
        ]},
        {id: 3,url: [
          "https://s1.328888.xyz/2022/09/16/cRLWi.png",
          "https://s1.328888.xyz/2022/09/16/cREtw.png",
          "https://s1.328888.xyz/2022/09/16/cRlBg.png",
          "https://s1.328888.xyz/2022/09/16/cRmfh.png",
          "https://s1.328888.xyz/2022/09/16/cRDYn.png",
          "https://s1.328888.xyz/2022/09/25/V8nSC.jpg",
          "https://s1.328888.xyz/2022/09/25/V8RNd.jpg",
          "https://s1.328888.xyz/2022/09/25/V8ZaU.jpg",
          "https://s1.328888.xyz/2022/09/25/V8iJB.jpg",
          "https://s1.328888.xyz/2022/09/25/V8iJB.jpg",
          "https://s1.328888.xyz/2022/09/25/V8WiR.jpg",
          "https://s1.328888.xyz/2022/09/25/V8v3P.jpg",
          "https://s1.328888.xyz/2022/09/25/VUEP6.jpg",
          "https://s1.328888.xyz/2022/09/25/VULXX.jpg",
          "https://s1.328888.xyz/2022/09/25/VUDSr.jpg",
          "https://s1.328888.xyz/2022/09/25/VUmoj.jpg",
          "https://s1.328888.xyz/2022/09/25/VUOlK.jpg",
          "https://s1.328888.xyz/2022/09/25/VUjkm.jpg",
        ]}
      ],
      flag: 1
    }
  },
  created() {
  },
  computed: {
    ...mapState(['userinfo'])
  },
  methods: {
    onClick(index){
      switch (index){
        case 0:
          this.phones=[ {
            id: 1,
            price: '9.00',
            desc: '电动牙刷',
            title: 'score mini mall',
            tag: [
              {
                name: '100ma'
              },
              {
                name: '1200ma'
              }
            ]
          },
            {
              id: 2,
              price: '18.00',
              desc: '手动牙刷',
              title: 'score mini mall',
              tag: [
                {
                  name: '10cm'
                },
                {
                  name: '12cm'
                }
              ]
            },
            {
              id: 3,
              price: '1200',
              desc: '纳米牙刷',
              title: 'honor 8A',
              tag: [
                {
                  name: '10cm'
                },
                {
                  name: '12cm'
                }
              ]
            },
            {
              id: 4,
              price: '1200',
              desc: '质感牙刷',
              title: 'honor 8A',
              tag: [
                {
                  name: '10cm'
                },
                {
                  name: '12cm'
                }
              ]
            },
            {
              id: 5,
              price: '1200',
              desc: '炭纤维牙刷',
              title: 'honor 8A',
              tag: [
                {
                  name: '10cm'
                },
                {
                  name: '12cm'
                }
              ]
            },
            {
              id: 6,
              price: '1200',
              desc: '默迪牙刷',
              title: 'honor 8A',
              tag: [
                {
                  name: '10cm'
                },
                {
                  name: '12cm'
                }
              ]
            },
            {
              id: 7,
              price: '1200',
              desc: '美白牙刷',
              title: 'honor 8A',
              tag: [
                {
                  name: '10cm'
                },
                {
                  name: '12cm'
                }
              ]
            },
            {
              id: 8,
              price: '1200',
              desc: '高质牙刷',
              title: 'honor 8A',
              tag: [
                {
                  name: '10cm'
                },
                {
                  name: '12cm'
                }
              ]
            },
            {
              id: 9,
              price: '1200',
              desc: '黑人牙刷',
              title: 'honor 8A',
              tag: [
                {
                  name: '10cm'
                },
                {
                  name: '12cm'
                }
              ]
            },
          ]
              break;
        case 1:
          this.phones=[ {
            id: 1,
            price: '9.00',
            desc: '小米手机',
            title: 'score mini mall',
            tag: [
              {
                name: '8+128G'
              },
              {
                name: '12+128G'
              }
            ]
          },
            {
              id: 2,
              price: '18.00',
              desc: '红米手机',
              title: 'score mini mall',
              tag: [
                {
                  name: '8+128G'
                },
                {
                  name: '12+128G'
                }
              ]
            },
            {
              id: 3,
              price: '18.00',
              desc: 'vivo手机',
              title: 'score mini mall',
              tag: [
                {
                  name: '8+128G'
                },
                {
                  name: '12+128G'
                }
              ]
            },
            {
              id: 3,
              price: '18.00',
              desc: 'vivo手机',
              title: 'score mini mall',
              tag: [
                {
                  name: '8+128G'
                },
                {
                  name: '12+128G'
                }
              ]
            },
            {
              id: 4,
              price: '18.00',
              desc: 'vivo手机',
              title: 'score mini mall',
              tag: [
                {
                  name: '8+128G'
                },
                {
                  name: '12+128G'
                }
              ]
            },
            {
              id: 5,
              price: '18.00',
              desc: 'vivo手机',
              title: 'score mini mall',
              tag: [
                {
                  name: '8+128G'
                },
                {
                  name: '12+128G'
                }
              ]
            },
            {
              id: 6,
              price: '18.00',
              desc: 'vivo手机',
              title: 'score mini mall',
              tag: [
                {
                  name: '8+128G'
                },
                {
                  name: '12+128G'
                }
              ]
            },
            {
              id: 7,
              price: '18.00',
              desc: 'vivo手机',
              title: 'score mini mall',
              tag: [
                {
                  name: '8+128G'
                },
                {
                  name: '12+128G'
                }
              ]
            },
            {
              id: 8,
              price: '18.00',
              desc: 'vivo手机',
              title: 'score mini mall',
              tag: [
                {
                  name: '8+128G'
                },
                {
                  name: '12+128G'
                }
              ]
            },
            {
              id: 9,
              price: '18.00',
              desc: 'vivo手机',
              title: 'score mini mall',
              tag: [
                {
                  name: '8+128G'
                },
                {
                  name: '12+128G'
                }
              ]
            },
          ]
          break;
        case 2:
          this.phones=[
              {
            id: 1,
            price: '9.00',
            desc: '辣条',
            title: 'score mini mall',
            tag: [
              {
                name: '麻辣'
              },
              {
                name: '麻辣'
              }
            ]
          },
            {
              id: 2,
              price: '18.00',
              desc: '薯片',
              title: 'score mini mall',
              tag: [
                {
                  name: '土豆味'
                },
                {
                  name: '番茄味'
                }
              ]
            },
            {
              id: 3,
              price: '18.00',
              desc: '薯片',
              title: 'score mini mall',
              tag: [
                {
                  name: '土豆味'
                },
                {
                  name: '番茄味'
                }
              ]
            },
            {
              id: 4,
              price: '18.00',
              desc: '薯片',
              title: 'score mini mall',
              tag: [
                {
                  name: '土豆味'
                },
                {
                  name: '番茄味'
                }
              ]
            },
            {
              id: 5,
              price: '18.00',
              desc: '薯片',
              title: 'score mini mall',
              tag: [
                {
                  name: '土豆味'
                },
                {
                  name: '番茄味'
                }
              ]
            },
            {
              id: 6,
              price: '18.00',
              desc: '薯片',
              title: 'score mini mall',
              tag: [
                {
                  name: '土豆味'
                },
                {
                  name: '番茄味'
                }
              ]
            },
            {
              id: 7,
              price: '18.00',
              desc: '薯片',
              title: 'score mini mall',
              tag: [
                {
                  name: '土豆味'
                },
                {
                  name: '番茄味'
                }
              ]
            },
            {
              id: 8,
              price: '18.00',
              desc: '薯片',
              title: 'score mini mall',
              tag: [
                {
                  name: '土豆味'
                },
                {
                  name: '番茄味'
                }
              ]
            },
            {
              id: 9,
              price: '18.00',
              desc: '薯片',
              title: 'score mini mall',
              tag: [
                {
                  name: '土豆味'
                },
                {
                  name: '番茄味'
                }
              ]
            },
          ]
          break;
        case 3:
          this.phones=[ {
            id: 1,
            price: '9.00',
            desc: '大卫毛巾',
            title: 'score mini mall',
            tag: [
              {
                name: '新疆棉'
              },
              {
                name: '水洗棉'
              }
            ]
          },
            {
              id: 2,
              price: '18.00',
              desc: '大力毛巾',
              title: 'score mini mall',
              tag: [
                {
                  name: '纯棉'
                },
                {
                  name: '水洗棉'
                }
              ]
            },
            {
              id: 3,
              price: '18.00',
              desc: '大力毛巾',
              title: 'score mini mall',
              tag: [
                {
                  name: '纯棉'
                },
                {
                  name: '水洗棉'
                }
              ]
            },
            {
              id: 4,
              price: '18.00',
              desc: '大力毛巾',
              title: 'score mini mall',
              tag: [
                {
                  name: '纯棉'
                },
                {
                  name: '水洗棉'
                }
              ]
            },
            {
              id: 5,
              price: '18.00',
              desc: '大力毛巾',
              title: 'score mini mall',
              tag: [
                {
                  name: '纯棉'
                },
                {
                  name: '水洗棉'
                }
              ]
            },
            {
              id: 6,
              price: '18.00',
              desc: '大力毛巾',
              title: 'score mini mall',
              tag: [
                {
                  name: '纯棉'
                },
                {
                  name: '水洗棉'
                }
              ]
            },
            {
              id: 7,
              price: '18.00',
              desc: '大力毛巾',
              title: 'score mini mall',
              tag: [
                {
                  name: '纯棉'
                },
                {
                  name: '水洗棉'
                }
              ]
            },
            {
              id: 8,
              price: '18.00',
              desc: '大力毛巾',
              title: 'score mini mall',
              tag: [
                {
                  name: '纯棉'
                },
                {
                  name: '水洗棉'
                }
              ]
            },
            {
              id: 9,
              price: '18.00',
              desc: '大力毛巾',
              title: 'score mini mall',
              tag: [
                {
                  name: '纯棉'
                },
                {
                  name: '水洗棉'
                }
              ]
            },
          ]
          break;
      }
    },
    buy(index,indexU){
      console.log("数组",this.phones)
      console.log("下标是二标是",index,indexU)
      const i = index
      this.show = true,
      this.goods = {
        picture: this.images[index].url[indexU]
          },
      this.sku = {
        tree: [
          {
            k: '规格', // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: '1', // skuValueId：规格值 id
                imgUrl: this.images[index].url[indexU], // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: this.images[index].url[indexU], // 用于预览显示的规格类目图片
                name: this.phones[indexU].tag[0].name, // skuValueName：规格值名称
              },
              {
                id: '2',
                imgUrl: this.images[index].url[indexU+2],
                previewImgUrl: this.images[index].url[indexU+2],
                name: this.phones[indexU].tag[1].name,
              }
            ],
            largeImageMode: true, //  是否展示大图模式
          }
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
            price: 900, // 价格（单位分）
            stock_num: 10 // 当前 sku 组合对应的库存
          },
          {
            s1: '2', // 规格类目 k_s 为 s1 的对应规格值 id
            price: 1800, // 价格（单位分）
            stock_num: 10 // 当前 sku 组合对应的库存
          },
        ],
        price: null, // 默认价格（单位元）
        stock_num: 27, // 商品总库存
        none_sku: false, // 是否无规格商品
        hide_stock: false // 是否隐藏剩余库存

      }
    },
    /*onBuyClicked(item){
      console.log(item)
      this.$store.state.specsId = item.selectedSkuComb.s1,
      this.$store.state.quantity = item.selectedNum
      //发送请求
      const url = "http://localhost:10009/oms/order/exchange"
      const dat ={
        actualScore: item.selectedSkuComb.price,
        goodsId: 4,
        purchaseVolume: item.selectedNum,
        userId: this.userinfo.id
      }
      this.axios.post(url,dat).then(reponse =>{
        if(reponse.data.state==200){
          Toast("下单成功",)
          console.log("数据",dat)
          this.$router.push({path:'/addressList', query:{
              url: this.sku.tree[0].v[item.selectedSkuComb.s1-1].previewImgUrl,
              score: item.selectedSkuComb.price*item.selectedNum
            }})
        }else{
          console.log("数据",reponse.data)
          Toast("积分不足")
        }
      })

    },*/
    onBuyClicked(item){
      console.log('66666666666666666',item)
      this.$store.state.specsId = item.selectedSkuComb.s1,
          this.$store.state.quantity = item.selectedNum
      //发送请求
      // const url = "http://localhost:10006/pay/pointsExchange/store/4/昆明理工大学"
      const dat ={
        actualScore: item.selectedSkuComb.price,
        goodsId: 4,
        purchaseVolume: item.selectedNum,
        userId: this.userinfo.id
      }
      this.axios.post('http://localhost:10006/pay/pointsExchange/store/4/昆明理工大学').then(response =>{
        if(response.data.state==200){
          Toast("下单成功",)
          console.log("数据",dat)
          this.$router.push({path:'/addressList', query:{
              url: this.sku.tree[0].v[item.selectedSkuComb.s1-1].previewImgUrl,
              score: item.selectedSkuComb.price*item.selectedNum,
              flag: this.flag
            }})
        }else{
          console.log("数据",response.data)
          Toast("积分不足")
        }
      })

    },
    onClickLeft() {
      Toast('返回');
      this.$router.push("homeview/my/mypage")
    },
    onPointClicked() {
      this.$router.push({path:'/addressList', query:{
          url: this.sku.tree[0].v[item.selectedSkuComb.s1-1].previewImgUrl,
          score: item.selectedSkuComb.price*item.selectedNum,
          flag: 2
        }})
    },
  }
}
</script>

<style scoped>

</style>